<template>
    <div class="foot-bar">
        <div class="icon-box">
            <router-link to='/my'>
            <div>
            <van-icon name="arrow-left" size="30"/>
            </div>
            <div>我的足迹</div>
            </router-link>
        </div>
        <ul class="foot-box">
            <li class="foot-boxn" v-for="(list, index) in listData" :key="list.id">
                <div class="foot-img">
                    <img :src="list.img">
                </div>
                <div class="foot-inf">
                    <div class="foot-pri">{{list.originalPrice}}</div>
                    <div class="foot-rm">
                        <van-icon name="cross" @click="remove(index)"/>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "Foot",
    data() {
        return {
            listData: []
        }
    },
    // 接收本地JSON文件
    created() {
        this.axios.get('data/mall.json').then(res => {
            this.listData = res.data;
        })
    },
    methods: {
        // 设置删除按钮的删除事件
        remove(index) {
            this.listData.splice(index,1)
        }
    }
}
</script>

<style scoped>
    .foot-bar {
        background-color: #ffffff;
    }
    ul {
        margin-top: 40px;
    }
    .icon-box {
        position: fixed;
        top: 0;
        width: 100%;
        padding: 0 10px;
        padding-bottom: 0;
        height: 40px;
        background-color: #ffffff;
        z-index: 99;
    }
    .icon-box a {
        color: #000000;
        height: 44px;
        line-height: 34px;
        display: flex;
    }
    .icon-box i {
        line-height: 44px;
    }
    .icon-box a div {
        line-height: 44px;
    }
    .foot-boxn {
        width: 32vw;
        height: 40vw;
        background: #eeeeee;
        border-radius: 5px;
        box-sizing: border-box;
        margin: 10px 0;
        margin-right: 1vw;
    }
    .foot-box {
        display: flex;
        margin-left: 1vw;
        flex-wrap: wrap;
    }
    .foot-img {
        width: 32vw;
        height: 32vw;
        border-radius: 5px;
        overflow: hidden;
    }
    .foot-img img {
        height: 32vw;
    }
    .foot-inf {
        display: flex;
        justify-content: space-between;
    }
    .foot-pri {
        color: #ff0000;
        line-height: 8vw;
    }
    .foot-rm {
        line-height: 8vw;
    }
    .foot-rm i {
        line-height: 8vw;
    }
</style>